<template>
    <van-tabs class="nav" v-model="active" color="#000" 
      type="line" 
      line-height="1px" title-inactive-color="#aaaaaa">
      <!-- 主页面的图书分页（选项卡） -->
        <van-tab  title="图书">
          <!-- 图书分页的搜索框 -->
          <searcher/>
          <homeBookList/>
          <recommend/>
          <bottom/>
        </van-tab>
        
        <!-- 主页面的服饰分页（选项卡） -->
        <van-tab  title="服饰">
          <searcher/>
          <homeCloth/>
        </van-tab>
        
        <!-- 主页面的电子分页（选项卡） -->
        <van-tab  title="电子">
          <searcher/>
          <electronics/>
        </van-tab>
        
        <!-- 主页面的原创商品分页（选项卡） -->
        <van-tab  title="原创商品">
          <yuanchaung/>
        </van-tab>
    </van-tabs>
</template>

<script>
import searcher from "./searcher.vue"
import homeBookList from "@/components/homeBookList/homeBookList.vue"
import homeCloth from "@/components/homeBookList/homeCloth.vue"
import recommend from "@/components/homeBookList/recommend.vue"
import electronics from "@/components/homeBookList/electronics.vue"
import yuanchaung from "@/components/homeBookList/yuanchaung.vue"
import bottom from "./bottom.vue"
export default {
  components:{
    searcher,homeBookList,recommend,bottom,homeCloth,electronics,yuanchaung
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style>
.van-tab {
  font-size: .16rem;
  display: flex;
  justify-content: space-around;
}
.van-tabs--line .van-tabs__wrap {
    height: 0.48rem;
    font-size: 16px;
    font-weight: 500;
    padding: 0 0.2rem 0 0;
    letter-spacing: 0.5px;
    background: rgb(255, 255, 255);
    border-bottom: 0.5px solid rgb(242, 242, 242);
}

</style>